
<template>
  <div id="app">
    <el-form ref="form" :model="addFrom" label-width="80px">
      <el-row>
        <ep-input
          @input-message="addFromChange"
          colspan="10"
          :value="addFrom.functionTitle"
          placeholder="请输入公告名称"
          label="公告名称"
          :isIcon="true"
          name="functionTitle"
        ></ep-input>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="发布时间">
            <el-radio-group @change="publishTimeChange" v-model="addFrom.publishTime">
              <el-radio label="0">立即发布</el-radio>
              <el-radio label="1">定时发布</el-radio>
            </el-radio-group>
            <el-date-picker
              v-if="isTimeShow"
              v-model="resourceValue"
              type="datetime"
              placeholder="选择日期时间"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="可见类型">
          <el-radio-group v-model="addFrom.isPublic" @change="isPubliChange">
            <el-radio label="0">所有可见</el-radio>
            <el-radio label="1">部分可见</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row v-if="isPublicShow">
        <el-form-item label="可见对象">
          <el-button @click="dialogFormVisible = true" type="text">+添加对象</el-button>
        </el-form-item>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>已选系统</span>
          </div>
          <el-tag
            v-for="tag in tags"
            :key="tag.name"
            closable
            :type="tag.type"
            :disable-transitions="false"
            style="margin-left:10px"
            @close="handleClose(tag)"
          >{{tag.name}}</el-tag>
        </el-card>
        <el-card class="box-card" style="margin-top:10px">
          <div slot="header" class="clearfix">
            <span>已选角色</span>
          </div>
          <div style="margin-bottom:5px">
            <span>社保局</span>
            <el-tag
              v-for="tag in tags"
              :key="tag.name"
              closable
              :type="tag.type"
              :disable-transitions="false"
              style="margin-left:10px"
              @close="handleClose(tag)"
            >{{tag.name}}</el-tag>
          </div>

          <div>
            <span>劳动局</span>
            <el-tag
              v-for="tag in tags"
              :key="tag.name"
              closable
              :type="tag.type"
              :disable-transitions="false"
              style="margin-left:10px"
              @close="handleClose(tag)"
            >{{tag.name}}</el-tag>
          </div>
        </el-card>
      </el-row>
      <div class="edit_container">
        <quill-editor
          v-model="content"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
        ></quill-editor>
      </div>
      <el-form-item style="margin-top:30px;">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form :model="dialogForm">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item>
              <el-select
                style="width:100%;"
                multiple
                filterable
                v-model="sysValue"
                placeholder="请选择系统"
              >
                <el-option-group
                  v-for="group in sysOptions"
                  :key="group.label"
                  :label="group.label"
                >
                  <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
          </el-col>
          <ep-select
            @select-message="onChange"
            colspan="12"
            :value="dialogForm.sysUser"
            name="sysUser"
          ></ep-select>
        </el-row>
        <el-row>
          <el-col :span="24">
            <tree-transfer
              :title="title"
              :from_data="fromData"
              :to_data="toData"
              :defaultProps="{label:'label'}"
              @addBtn="add"
              @removeBtn="remove"
              mode="transfer"
              height="540px"
              filter
              openAll
            ></tree-transfer>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveForm">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import treeTransfer from "el-tree-transfer";
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  components: {
    quillEditor,
    treeTransfer
  },
  data() {
    return {
      title: ["未选角色", "已选角色"],
      fromData: [
        {
          id: "1",
          pid: 0,
          label: "一级 1",
          children: [
            {
              id: "1-1",
              pid: "1",
              label: "二级 1-1",
              disabled: true,
              children: []
            },
            {
              id: "1-2",
              pid: "1",
              label: "二级 1-2",
              children: [
                {
                  id: "1-2-1",
                  pid: "1-2",
                  children: [],
                  label: "二级 1-2-1"
                },
                {
                  id: "1-2-2",
                  pid: "1-2",
                  children: [],
                  label: "二级 1-2-2"
                }
              ]
            }
          ]
        }
      ],
      toData: [],

      resourceValue: "",
      transferValue: [],
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
      },
      dialogFormVisible: false,
      content: "",
      editorOption: {},
      isTimeShow: false,
      isPublicShow: true,
      addFrom: {
        title: "",
        publishTime: "0",
        isPublic: "0"
      },
      dialogForm: {
        name: "",
        sysUser: "0"
      },
      sysValue: [],
      tags: [
        { name: "标签一" },
        { name: "标签二" },
        { name: "标签三" },
        { name: "标签四" },
        { name: "标签五" }
      ],
      sysOptions: [
        {
          label: "热门城市",
          options: [
            {
              value: "Shanghai",
              label: "上海"
            },
            {
              value: "Beijing",
              label: "北京"
            }
          ]
        },
        {
          label: "城市名",
          options: [
            {
              value: "Chengdu",
              label: "成都"
            },
            {
              value: "Shenzhen",
              label: "深圳"
            },
            {
              value: "Guangzhou",
              label: "广州"
            },
            {
              value: "Dalian",
              label: "大连"
            }
          ]
        }
      ]
    };
  },
  methods: {
    publishTimeChange(val) {
      console.log(val);

      this.isTimeShow = val == 1 ? true : false;
    },
    isPubliChange(val) {
      console.log(val);

      this.isPublicShow = val == 1 ? true : false;
    },
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
    },
    saveForm() {
      this.$post("/notification/save", {
        ...dialogForm
      }).then(data => {
        console.log(data);
      });
    },
    // 监听穿梭框组件添加
    add(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log("fromData:", fromData);
      console.log("toData:", toData);
      console.log("obj:", obj);
    },
    // 监听穿梭框组件移除
    remove(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      console.log("fromData:", fromData);
      console.log("toData:", toData);
      console.log("obj:", obj);
    },

    addFromChange(data, type) {
      this.addForm[type] = data;
    },
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {
      console.log(this.content);
    }, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {}, // 内容改变事件
    cancel() {
      this.$router.go(-1);
    },
    onSubmit() {
      console.log(this.addFrom);
      console.log(this.content);
    },
    onChange(data, type) {
      this.dialogForm[type] = data;
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  }
};
</script>